<template>
  <div>
    <hm-btn></hm-btn>
    <HmBtn class="xxx"></HmBtn>
    <div class="btn"></div>
    <div v-html="str"></div>
  </div>
</template>
<script>
// import HmBtn from '@/components/HmBtn.vue'
export default {
  // 局部注册：只能用于当前组件
  // 全局注册：所有页面都可使用
  components: {
    // HmBtn: HmBtn
  },
  data () {
    return {
      str: '<button class="btn">123</button>'
    }
  }
}
</script>

<style scoped>
/* scoped:该属性只用于当前组件和子组件最外层 
          看得到的管得到，看不到的管不到
          建议所有组件都加scoped
*/
.btn {
  padding: 100px;
  color: red;
  width: 100px;
  height: 100px;
  background-color: #f00;
}
.xxx {
  border: 10px solid pink;
}
</style>
